<template>
  <div class="body">
    <!-- 顶部背景 -->
    <div class="head_line">
      <p class="line"></p>
      <p class="bj"></p>
    </div>

    <!-- 步骤 -->
    <div class="step_box">
      

      <!-- <el-row :gutter="20">
        <el-col :span="8" > -->
          <div class="step" v-for="(item, index) in stepList" :key="index">
            <div class="quan" v-if="stepNum == index">
              <p></p>
            </div>
            <p class="mr_quan" v-else></p>

            <p :class="stepNum == index ? 'text text_on' : 'text'">{{ item }}</p>
            
            <p class="line"></p>
          </div>
        <!-- </el-col>
      </el-row> -->
    </div>

    <!-- 第一步 -->
    <model-step1 ref="childRefOne" @anniuNum="downClick" v-loading="nextLoading" v-if="stepNum == 0" :bailId="props.bailId" :bailInfo="bailInfo"/>

    <!-- 第二步 -->
    <model-step2 @fileList="getFileListTwo" :bailId="props.bailId" :bailInfo="bailInfo" ref="childRef" v-if="stepNum == 1" />

    <!-- 第三步 -->
    <model-step3 @check="querenCheck" ref="lastChildRef" :bailId="props.bailId" :bailInfo="bailInfo" :tkType="tk_type" v-if="stepNum == 2" />

    <!-- 下一步 -->
    <div class="foot_btn">
      <el-button v-if="stepNum == 0" :disabled="nextLoading" @click="handleCloseDrawer">取消</el-button>
      <el-button v-else :disabled="nextLoading" @click="upper">上一步</el-button>
      <el-button 
        :loading="nextLoading" 
        @click="generateEwm" 
        :disabled="!querenLoading"
        v-if="stepNum == 2" 
        type="primary"
      >确认并生成收款二维码</el-button
      >
      <el-button v-else type="primary" :loading="nextLoading" @click="nextStep"
        >下一步</el-button
      >
    </div>

    <!-- 生成二维码 -->
    <!-- <el-dialog v-if="ewmVisible" title="" v-model="ewmVisible" width="60%">
      <scan-ewm></scan-ewm>
    </el-dialog> -->


    
    <!-- 生成二维码 -->
    <el-dialog v-if="ewmVisible" title="" v-model="ewmVisible" width="1120">
      <scan-ewm :ewmInfo="ewmInfo" :ewmUrl="ewmUrl"></scan-ewm>
    </el-dialog>

    <!-- 完善办案日期 -->
    <el-dialog v-model="updateDateShow" :show-close="false">
      <update-bail-date :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 案件延期申请 -->
    <el-dialog v-model="updateDelayShow" :show-close="false">
      <update-bail-delay :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案预留银行卡 -->
    <el-dialog v-model="updateBankShow" :show-close="false">
      <update-bank :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 委托协办单位 -->
    <el-dialog v-model="updateEntrustShow" :show-close="false">
      <update-entrust :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案人 -->
    <el-dialog v-model="updatePoliceShow" :show-close="false">
      <update-police :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案单位 -->
    <el-dialog v-model="updateUnitShow" :show-close="false">
      <update-unit :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 完善当事人信息 -->
    <el-dialog v-model="updateUser" :show-close="false">
      <update-user :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="FormModel">
import { ElNotification, ElMessageBox } from 'element-plus'
import { ElLoading } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
import ModelStep1 from "./ModelStep1.vue";
import ModelStep2 from "./ModelStep2.vue";
import ModelStep3 from "./ModelStep3.vue";

import ScanEwm from "./ScanEwm.vue";
import UpdateBailDate from "./UpdateBailDate.vue";
import UpdateBailDelay from "./UpdateBailDelay.vue";
import UpdateBank from "./UpdateBank.vue";
import UpdateEntrust from "./UpdateEntrust.vue";
import UpdatePolice from "./UpdatePolice.vue";
import UpdateUnit from "./UpdateUnit.vue";
import UpdateUser from "./UpdateUser.vue";
import { reactive, watch, ref,onMounted } from "vue";
import { defineProps, defineEmits } from "vue";
import { revokeQrcode,getPlayMore, getBailInfo,updateCaseInfo,closeBail,getQrCode,addJkb,qrcodeView } from "@/api/bond/pay";

const router = useRouter();

const props = defineProps({
  mdl: {
    type: Object,
    required: true,
  },
  handleCloseDrawer: {
    type: Function,
    required: true,
  },
  bailId:{
    type: Number,
  }
});

// 步骤数据
let stepList = reactive(
  ["确认案件信息", "填写银行卡预留信息", "生成缴费二维码"]
);
let stepNum = ref(-1);


onMounted(() => {
  getInfo()
});

// 获取案件详情
let bailInfo = ref({});
const getInfo = async () => {
  await getBailInfo({ process_id: props.bailId }).then((res) => {
    if (res.code == 1) {
      bailInfo.value = res.data;
      stepNum.value = 0
    }
  });
};

// 获取上传的文件
let fileArr = []
const getFileList = (e: any)=>{
  console.log(e)
  fileArr.push(e)
}

// 关闭所有弹窗
const closeDrawer = ()=>{
  getInfo()
  updateDateShow.value = false
  updateDelayShow.value = false
  updateBankShow.value = false
  updateEntrustShow.value = false
  updatePoliceShow.value = false
  updateUnitShow.value = false
  updateUser.value = false
}



// 按钮点击
let id = ref(0) // 主表id
let bailId = ref(0) // 案件id
let updateDateShow = ref(false) // 完善办案日期弹窗
let updateDelayShow = ref(false) // 案件延期申请弹窗
let updateBankShow = ref(false) // 修改办案预留银行卡
let updateEntrustShow = ref(false) // 委托协办单位
let updatePoliceShow = ref(false) // 修改办案人
let updateUnitShow = ref(false) // 修改办案单位
let updateUser = ref(false) // 完善当事人信息

const downClick = (obj:any)=>{
  id.value = obj.id
  bailId.value = obj.bail_id
  if(obj.num == 1){ //案件延期申请
    updateDelayShow.value = true
  }
  if(obj.num == 7){ //修改办案单位
    updateUnitShow.value = true
  }
  if(obj.num == 4){ //修改办案日期
    updateDateShow.value = true
  }
  if(obj.num == 5){ //委托协办单位
    updateEntrustShow.value = true
  }
  if(obj.num == 8){ //修改办案人
    updatePoliceShow.value = true
  }
  if(obj.num == 9){ //完善当事人信息
    updateUser.value = true
  }
  if(obj.num == 6){ //修改办案预留银行卡
    updateBankShow.value = true
  }
  if(obj.num == 3){// 关闭本案
    ElMessageBox.confirm(
    '确定要关闭本案?',
    '提示',
    {
      confirmButtonText: '确认关闭',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      closeBail({bail_id:props.bailId}).then(res=>{
        if(res.code == 1){
          ElNotification({ message:res.msg, type: "success" });
          getInfo()
        }else{
          ElNotification.error(res.msg);
        }
      })
    })
    .catch(() => {
    })
  }
  if(obj.num == 10){// 撤销缴费申请
    ElMessageBox.confirm(
    '确定要撤销缴费申请?',
    '提示',
    {
      confirmButtonText: '确认撤销',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      revokeQrcode({process_id:id}).then(res=>{
        if(res.code == 1){
          ElNotification({ message:res.msg, type: "success" });
        }else{
          ElNotification.error(res.msg);
        }
      })
    })
    .catch(() => {
    })
  }
}


/*=====第二步:填写银行卡预留信息===*/
const childRef = ref(null);
// 获取上传的文件
let fileArrTwo: any[] = []
const getFileListTwo = (e: any)=>{
  console.log(e)
  fileArrTwo.push(e)
}

/*===上一步===*/
const upper =()=>{
  stepNum.value--;
}

/*===提交-进行下一步===*/
let nextLoading = ref(false);
let childRefOne = ref(null)
let tk_type = ref(0)
const nextStep = () => {
  // ElMessageBox.confirm(
  //   '确定信息无误，进入下一步?',
  //   '提示',
  //   {
  //     confirmButtonText: '确认',
  //     cancelButtonText: '取消',
  //     type: 'warning',
  //   }
  // )
  //   .then(() => {
  //     nextLoading.value = true
      
  //   })
  //   .catch(() => {
  //   })
  if(stepNum.value == 0){// 第一步提交
    let arr: any[] = []
    childRefOne.value.fileArr.map((item: { url: any; })=>{
      arr.push(item.url)
    })
    let data = {
      // qbhstzs:arr.join(','),
      process_id:props.bailId
    }
    updateCaseInfo(data).then(res=>{
      if(res.code == 1){
        nextLoading.value = false
        stepNum.value++;
        // stepNum.value = 2
      }else{
        nextLoading.value = false
        ElNotification.error(res.msg);
      }
    })
  }

  if(stepNum.value == 1){// 第二步提交
    if(childRef.value.changeValue != '其他'){
      childRef.value.form.bank_id_name = childRef.value.changeValue
    }
    console.log(childRef.value.form)
    let arr: any[] = []
    childRef.value.evidenceFileArr.map((item: { url: any; })=>{
      arr.push(item.url)
    })
    childRef.value.updateForms.validate(async(valid: any, fields: any) => {
      if (valid) {
        let data = {
          ...childRef.value.form,
          relationships_id:childRef.value.relationships_id,
          tk_type:childRef.value.tk_type,
          // zzcl:arr.join(','),
          process_id:props.bailId
        }
        tk_type.value = data.tk_type
        console.log(data)
        console.log(tk_type.value)
        await updateCaseInfo(data).then(res=>{
          if(res.code == 1){
            nextLoading.value = false
            stepNum.value++;
          }else{
            nextLoading.value = false
            ElNotification.error(res.msg);
          }
        })
      } else {
        console.log('error submit!', fields)
        nextLoading.value = false
      }
    })
  }
};

// 确认无误
let querenLoading = ref(true)
const querenCheck=(e: boolean)=>{
  console.log(e)
  querenLoading.value = e
}

const emit = defineEmits(['ewmOk']);

// 生成二维码
const generateEwm = async() =>{

  emit("ewmOk",props.bailId);
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
}
.head_line {
  .line {
    width: 100%;
    height: 8px;
    background: #1c55d1;
  }
  .bj {
    height: 46px;
    background: linear-gradient(
      180deg,
      rgba(0, 80, 255, 0.25) 0%,
      rgba(0, 80, 255, 0.1314) 20%,
      rgba(0, 80, 255, 0.0508) 59%,
      rgba(28, 85, 209, 0) 87%
    );
  }
}
.step_box {
  margin:0 30px;
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
  .step {
    width: 33%;
    display: flex;
    align-items: center;
    &:nth-of-type(2){
      width: 42%;
    }
    &:nth-of-type(3){
      width: 25%;
    }
    .quan {
      width: 28px;
      height: 28px;
      background: #0046df;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        width: 12px;
        height: 12px;
        background: #ffffff;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
        border-radius: 50%;
      }
    }
    .mr_quan {
      width: 28px;
      height: 28px;
      background: #edf1f6;
      border-radius: 50%;
    }
    .text {
      font-size: 15px;
      color: #44567c;
      margin-left: 12px;
    }
    .text_on {
      color: #0046df;
      font-weight: 500;
    }
    .line {
      width: 15%;
      height: 2px;
      box-sizing: border-box;
      border: 1px dashed #edf1f6;
      margin: 0 auto;
    }
    &:last-child {
      .line {
        display: none;
      }
    }
  }
}
.foot_btn {
  // position: absolute;
  // bottom:80px;
  text-align: center;
  width: 100%;
  padding: 50px 0;
}
</style>
